<template>
    <div class="more-action-box" v-if="showActions" :style="{position}">
    <div class="more-action-mark" @click="closeSort" :style="{position}"> </div>
    <div class="more-aciton" :style="{position}">
      <div class="title-box">
        <div class="title">{{$t('message.mobile.filter')}}</div>
        <svg class="close-button" aria-hidden="true" @click="closeSort">
          <use xlink:href="#keowledge-mobile-guanbi"></use>
        </svg>
      </div>
      <div class="action-boxs">
        <template v-for="(item,index) in actionList">
          <div class="action-item" :key="index"  v-if="item.show">
            <div class="type-name">{{item.label}}</div>
            <div class="action-type-item-box">
              <div class="action-type-item" v-for="(itemT,indexT) in item.list" :key="indexT" :class="[activeObj[item.props]==itemT.value && 'active']"
                @click="changeActive(itemT,item.props)">
                {{$t(itemT.label)}}
              </div>
            </div>
          </div>
        </template>
        <div class="button-box">
          <div class="replace-button" @click="handleCancal">{{$t('message.buttons.resetting')}}</div>
          <div class="submit-button" @click="handleSubmit">{{$t('message.buttons.submit')}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits(["cancal","submit"])
const props = defineProps({
  position:{
      type:String,
      default:'absolute'
    },
    showSort:{
      type:Boolean,
      default:true
    },
    showType:{
      type:Boolean,
      default:true
    }
})

const actionList = ref([
  {
    show:true,
    label:'message.mobile.type',
    props:'type',
    list:[
      {label:'message.mobile.allType',value:""},
      {label:'message.text.document',value:"office_doc"},
      {label:'message.typeMenu.form',value:"document_xlsx"},
      {label:'message.typeMenu.text',value:"document_html"},
      {label:'message.typeMenu.mindMap',value:"document_map"},
      {label:'message.typeMenu.process',value:"document_flow"},
      {label:'message.mobile.ppt',value:"office_ppt"},
      {label:'message.mobile.mindMap',value:"xmind"},            
      {label:'message.mobile.pdf',value:"office_pdf"},
      {label:'message.mobile.markdown',value:"md"},
    ]
  },
  {
    show:true,
    label:'message.mobile.sort',
    props:'sort',
    list:[
      {label:'message.mobile.timeAsc',value:"createTime,false"},
      {label:'message.mobile.timeDesc',value:"createTime,true"},
      {label:'message.mobile.nameAsc',value:"name,true"},
      {label:'message.mobile.nameDesc',value:"name,false"},
    ]
  }
])
const showActions = ref(false)
const activeObj = ref({
  type:'',
  sort:'createTime,true'
})
onMounted(()=>{
  actionList.value[0].show = props.showType
  actionList.value[1].show = props.showSort
})

function openSort(item){
  if(item){
    activeObj.value = JSON.parse(JSON.stringify(item))
  }
  showActions.value = true
}
function closeSort(){
  showActions.value = false
}
function handleCancal(){
  activeObj.value = {
    type:'',
    sort:'createTime,true'
  }
  closeSort()
  emit('cancal')
}
function handleSubmit(){
  closeSort()
  emit('submit',activeObj.value)
}
function changeActive(item,key){
  activeObj.value[key] = item.value
}

defineExpose({
  openSort,
})
</script>
<style lang="scss" scoped>
.more-action-box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  .more-action-mark{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background: rgba(54,59,76,0.5);
    z-index: 0;
  }
  .more-aciton{
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 1;
    background-color: #f5f6f7;
    border-radius: .75rem .75rem 0px 0px;
    padding: 1rem .375rem .375rem;
    box-sizing: border-box;
    .title-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon-png{
        width: 1.5rem;
        height: 1.5rem;
        margin-left: .75rem;
      }
      .title{
        width: calc(100% - 3.75rem);
        color: #363B4C;
        font-size: .9375rem;
        @include SourceHanSansCN-Bold;
        margin-left: .75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .close-button{
        width: 1rem;
        height: 1rem;
        margin-right: .75rem;
      }
    }
    .action-boxs{
      margin-top: .75rem;
      padding: 1rem .75rem;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: .4375rem;
      .action-item{
        margin:0 0 1.25rem 0px;
        .type-name{
          color: #363B4C;
          font-size: .9375rem;
          @include SourceHanSansCN-Bold;
          margin-bottom: .75rem;
        }
        .action-type-item-box{
          display: grid;
          grid-template-columns: repeat(3,1fr);
          column-gap: .75rem;
          row-gap: .75rem;
          .action-type-item{
            height: 2.25rem;
            background: #F5F6F7;
            border-radius: .25rem;
            color: #363B4C;
            font-size: .875rem;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .active{
            color: #1E6FFF;
            background: #E4EDFF;
          }
        }
      }
      .line-box{
        margin: 1.25rem 0px;
        height: .0625rem;
        background: #EEEFF0;
      }
      .button-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.5rem;
        .replace-button{
          width: 6rem;
          height: 3rem;
          background: #F5F6F7;
          border-radius: .375rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: .875rem;
          color: #363B4C;
        }
        .submit-button{
          margin-left: .75rem;
          width: 14.375rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFFFFF;
          font-size: .875rem;
          @include SourceHanSansCN-Medium;
          height: 3rem;
          background: #1E6FFF;
          border-radius: .375rem;
          opacity: 1;
        }
      }
    }
  }
}
</style>